<template>
    <div class="login-box">
        <div class="div1"></div>
        <div class="div">
           <div class="sign-box">
                <div class="sign-in">
                    <h3>{{$t('langs.land')}}</h3>
                    <div class="registered"><span>{{$t('langs.reg')}}</span></div>
                    <div class="input-box">
                        <span>{{$t('langs.phone')}}</span>
                        <div class="telephone">
                            <el-select v-model="value">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <img src="../assets/img/中国.png" alt="" class="china">
                            <input type="text" class="input" maxlength="11" style=" border: 1px solid #000;"  v-model="tel">
                        </div>
                    </div>
                    <div class="input-box">
                        <span>{{$t('langs.pawd')}}</span>
                        <div class="telephone">
                            <input :type="paswrdShow?'text':'password'" maxlength="16" class="input1" style=" border: 1px solid #000;" v-model="paws">
                            <img src="../assets/img/密码显示隐藏-01.png" alt="" class="paswrd" @click="passwordstatus">
                        </div>
                    </div>
                    <div style="margin: 8px 0 26px 0;">
                    <el-checkbox v-model="checked">{{$t('langs.repassw')}}</el-checkbox>
                    </div>
                    <button @click="Userlogin">{{$t('langs.land')}}</button>
                    <div class="forget"><span @click="toregpaswrd">{{$t('langs.forgetpassw')}}</span></div>
                </div>
                <div class="sign-in" style="margin-left: 15px;">
                    <h3>{{$t('langs.register')}}</h3>
                    <div class="input-box" style="margin-top: 78px;">
                        <span>{{$t('langs.phone')}}</span>
                        <div class="telephone">
                            <el-select v-model="value">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <img src="../assets/img/中国.png" alt="" class="china">
                            <input type="text" class="input" maxlength="11" style=" border: 1px solid #000;" v-model="phone">
                        </div>
                    </div>
                    <div class="input-box">
                        <span>{{$t('langs.SMSvcode')}}</span>
                        <div class="telephone">
                            <input type="text" maxlength="4" class="note" v-model="code">
                            <div class="note1" @click="sendverificationcode">{{note}}  {{i}}</div>
                        </div>
                    </div>
                    <div style="margin: 8px 0 26px   0;">
                        <el-checkbox v-model="checked1"></el-checkbox><span style="font-size: 10px;margin-left: 4px;cursor: pointer;" @click="Modalboxshow=true">{{$t('langs.regagree')}}</span>
                    </div>
                    <button @click="torouter">{{$t('langs.register')}}</button>
                </div>
           </div>
        </div>
        <Modalbox v-if="Modalboxshow">
            <div class="agreement">
                <div>
                    <div v-html="agreementcent.content"></div>
                </div>
                <div v-html="agreementcent.title"></div>
                <i class="iconfont icon-htmal5icon21" @click="Modalboxshow=false"></i>
            </div>
        </Modalbox>
    </div>
</template>

<script>
import Modalbox from "@/components/Modalbox.vue"

import {findOne,login,getVer} from "@/common/request.js"
export default {
    components: {
        Modalbox
    },
    data() {
        return {
            options: [{//电话区域
                value: '选项1',
                label: '+86'
            }, {
                value: '选项2',
                label: '+86'
            }],
            value: '+86',
            paswrdShow: false, //密码显示或隐藏
            checked: false, //是否记住密码
            checked1: false , //是否同意协议
            phone: null, //电话
            code: '', //验证码
            note: this.$t('langs.Sendvcode'),
            i: null,
            timer: '',
            a: 0,
            tel: '',//登录电话
            paws: '',//登录密码
            Modalboxshow: false, //协议
            agreementcent: null//协议内容
        }
    },
    created() {
        this.getfindOne() //注册协议请求
        
        if(localStorage.getItem('tel')!=='') {
            this.tel = localStorage.getItem('tel')
            this.paws = localStorage.getItem('paws')
            this.checked = true
        }
    },
    methods: {
        getfindOne() {
            findOne({articleId: 2}).then(res=>{//注册协议请求
                this.agreementcent = res
            })
        },
        Userlogin() {//登录
            let _this = this
            if(_this.loginVerification(_this.tel,_this.paws)) {
                login({
                    passWord: _this.paws,
                    tel: _this.tel
                }).then(res=>{
                    console.log(res)
                    let data = res.data
                    if(data.code == 0) {
                        _this.$message({
                            showClose: true,
                            message: _this.$t('langs.Tipa.logintips'),
                            type: 'success'
                        });
                        this.$cookies.set("token",data.token,"1d")
                        this.$cookies.set("userinformation",data.result,"1d")
                        this.$cookies.set("loginid",1,"1d")
                        this.Rememberthepassword()
                        _this.$router.push({
                            path: '/'
                        })
                    }
                    if(data.code == -1) {
                        _this.$msg(data.message) 
                    }
                })
            }
        },
        passwordstatus() {//密码显示&隐藏
            this.paswrdShow = !this.paswrdShow
        },
        torouter() {//注册
            if(this.Verification(this.phone,this.code,this.checked1)) {
                clearInterval(this.timer);
                this.$router.push({
                    path: '/register',
                    query: {
                        code: this.code
                    }
                })
            }
            
        },
        sendverificationcode() {//发送验证码
            let tel = this.phone
            if(this.phoneVerification(tel)) {
                if(this.note == this.$t('langs.Sendvcode')) {
                    getVer({tel:tel}).then((res)=>{
                        this.a = 1
                        this.i = 60
                        this.note = this.$t('langs.Sending')
                        console.log(this.$t('langs.Sending'))
                        this.gettimer()
                        if(res.status == 200) {
                            this.$msgsuccess(this.$t('langs.Tips.sendtips'));
                        }
                    })
                }else {
                    this.$msg(this.$t('langs.Sendvcode'));
                }
            }
        },
        loginVerification(tel,paws) {//登录验证
            let  myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if(tel==='') {
                this.$msg(this.$t('langs.Tips.teltips'));
                return false;
            }
            if (!myreg.test(tel)) {
                this.$msg(this.$t('langs.Tips.teltips1'));
                return false;
            } 
            if(paws == '') {
                this.$msg(this.$t('langs.Tips.pawdtips'));
                return false
            }
            return true
        },
        Verification(tel,code,checked1) {//注册验证
            let  myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(tel)) {
               this.$msg(this.$t('langs.Tips.teltips1'));
                return false;
            } 
            if(code == '') {
               this.$msg(this.$t('langs.Tips.sendtips1'));
                return false
            }
            if(!/^[0-9]*[1-9][0-9]*$/.test(code)) {
                this.$msg(this.$t('langs.Tips.sendtips2'));
                return false
            }
            if(code.length > 4 || code.length <= 0) {
                this.$msg(this.$t('langs.Tips.sendtips3'));
                return false
            }
            if(checked1===false) {
                this.$msg(this.$t('langs.Tips.regtips'));
                return false
            }
            return true
        },
        phoneVerification (tel) {//手机号码验证
            let  myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(tel)) {
                this.$msg(this.$t('langs.Tips.teltips1'));
                return false;
            } 
            return true
        },
        gettimer() {//倒计时
            this.timer = setInterval(()=>{
                console.log(1)
                if(this.a == 1) {
                    this.i--
                    if(this.i==0) {
                        clearInterval(this.timer);
                        this.a = 0
                        this.i = null
                        this.note = this.$t('langs.Sendvcode')
                    }
                }
            }, 1000);
        },
        toregpaswrd() {//忘记密码
            this.$router.push({
                path: '/regpaswrd'
            })
        },
        Rememberthepassword() {//是否记住密码
            if(this.checked) {
                localStorage.setItem('tel',this.tel)
                localStorage.setItem('paws',this.paws)
            }
        }
    },

}
</script>

<style lang="scss">
.login-box {
    >.div1 {
        width: 100%;
        height: 165px;
        background: #000;
    }
    >.div {
       overflow: hidden;
        padding: 95.5px 0;
        .sign-box {
            width: 900px;
            overflow: hidden;
            margin: 0 auto;
        }
        .sign-in {
           width: 372px;
           padding: 0 20px;
           color: #101010;
           float: left;
           >h3 {
               text-align: center;
               font-size: 28px;
               
           }
           .registered {
               font-size: 14px;
               margin-top: 45px;
               padding-left: 3px;
               margin-bottom: 14px;
           }
           .input-box {
               margin-top: 12px;
               >span {
                   font-size: 12px;
                   padding-left: 3px;
               }
               .telephone {
                   position: relative;
                   margin-top: 6px;
                    >.china {
                       width: 20px;
                       height: 14px;
                       position: absolute;
                       left: 8px;
                       top: 13px;
                    }
                    >.input {
                        margin-left: 8px;
                        height: 40px;
                        width: 228px;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        outline: none;
                        padding: 0 20px;
                        letter-spacing:12px;
                    }
                    >.input1 {
                        width: 330px;
                        height: 50px;
                        outline: none;
                        padding: 0 30px 0 10px;
                        letter-spacing:12px;
                    }
                    .paswrd {
                        width: 22px;
                        height: 22px;
                        position: absolute;
                        right: 8px;
                        top: 50%;
                        margin-top: -11px;
                        cursor: pointer;
                    }
                    .note {
                        width: 221px;
                        height: 40px;
                        outline: none;
                        padding: 0 20px;
                        border: 1px solid #000;
                        letter-spacing:30px;
                    }
                    .note1 {
                        width: 98px;
                        font-size: 12px;
                        height: 40px;
                        border: 1px solid #000;
                        text-align: center;
                        line-height: 40px;
                        position: absolute;
                        right: 0;
                        top: 0;
                        cursor: pointer;
                    }
               }
              
           }
           .forget {
               text-align:center;
               font-size: 13px;
               color: #000;
               margin-top: 15px;
               cursor: pointer;
           }
       }
   }
   button {
       width: 371px;
       height: 44px;
       background: #000;
       color: #fff;
       border-radius: 4px;
       outline: none;
       cursor: pointer;
   }
}
.agreement {
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -490px;
    margin-top: -315px;
    padding-top: 60px;
    border-radius: 5px;
    >div:nth-child(1) {
        padding: 20px 40px;
        width: 940px;
        height: 550px;
        overflow-y:scroll; 
        >div:nth-child(1) {
            font-size: 14px;
            >p {
                line-height: 40px;
            }
        }
    }
    >div:nth-child(2) {
        font-size: 24px;
        text-align: center;
        position: absolute;
        top: 15px;
        left: 50%;
        margin-left: -72px;
    }
    >i {
        font-size: 28px;
        color: #bbb;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
.el-select {
    width: 95px;
    border: 1px solid #000;
}
.el-select .el-input__inner:focus {
    border: none;
}
.el-input__inner {
    border:none;
    font-size: 12px;
    padding: 0 10px 0 37px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #333;
    background: #333;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #101010;
}
.el-checkbox__inner {
    border-radius: 50%;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #333;
}
.el-checkbox__label {
    font-size: 12px;
}

</style>